{% extends "pc/layout.html" %}
{% block content %}
<link rel="stylesheet" href="/css/pc/sectionDetail.css">
<div id="sectionDetail">
    <div class="book_cover">
        <img class="conver_img" src="/images/图层10.png" alt="">
        <p class="book_title">前端学习手册</p>
        <span class="book_info">前端学习手册</span>
    </div>
    <div class="chapter_list">
        {% for chapter in menuList %}
        <div class="fold">
            <ul class="chapters">
                <li class="chapter">第{{loop.index}}章：{{chapter.title}}</li>
            </ul>

            <ul class="sections">
                {% for section in chapter.dataValues.sectionList %}
                <li class="section">第{{loop.index}}节：{{section.title}}</li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    </div>
    <div class="section_detail">
        {{sectionDetail.html_text | safe}}
    </div>
    <div class="book_list">
        <ul>
           {% for book in bookList %}
            <a href="http://localhost:7001/chapter/{{book.id}}"><li>{{book.title}}</li></a>
            {% endfor %}
        </ul>
    </div>
</div>
<script src="/js/jquery-3.6.0.min.js"></script>
<script >
    let flag = true
    $(".chapters").click(function (){
        if(flag){
           $(this).next(".sections").show()
            flag = !flag
        }else{
           $(this).next(".sections").hide()
            flag = !flag
        }

    })
</script>
{% endblock %}